<template>
  <!-- 九宫格排盘 -->
  <view class="plate-grid">
    <view v-for="(palace, index) in palaces" :key="index" class="palace">
      <!-- 天盘 -->
      <view class="palace-section star">
        <text>{{ plate.stars[index] }}</text>
      </view>
      <!-- 四课 -->
      <view class="palace-section course">
        <text>{{ plate.tianPan.stems[index] }}</text>
        <text>{{ plate.tianPan.gods[index] }}</text>
        <text>{{ plate.tianPan.hidden[index] }}</text>
      </view>
      <!-- 八门 -->
      <view class="palace-section door">
        <text>{{ plate.renPan.stems[index] }}</text>
        <text>{{ plate.renPan.hidden[index] }}</text>
        <text>{{ plate.renPan.doors[index] }}</text>
      </view>
      <!-- 地盘 -->
      <view class="palace-section earth">
        <text>{{ plate.diPan.stems[index] }}</text>
        <text>{{ plate.diPan.gods[index] }}</text>
        <text>{{ plate.diPan.hidden[index] }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import { formatDate } from '@/utils/date'

export default {
  name: 'QimenPlate',
  props: {
    matter: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState('qimen', [
      'currentDate',
      'plate',
      'shiChen',
      'ganZhi',
      'kongWang',
      'jieQi',
      'juShou',
      'juNumber',
      'zhiFu',
      'zhiShi',
      'anZhiShi'
    ]),
    palaces() {
      return this.plate?.palaces || []
    }
  },
  methods: {
    formatDate
  }
}
</script>

<style lang="scss" scoped>
.plate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4rpx;
  background-color: #ccc;
  padding: 4rpx;

  .palace {
    aspect-ratio: 1;
    background-color: white;
    padding: 16rpx;
    display: flex;
    flex-direction: column;

    .palace-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;

      &.star {
        font-size: 28rpx;
        font-weight: bold;
      }

      text {
        line-height: 1.2;
      }
    }
  }
}
</style>